/* Copyright 2022 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style
 * #import=chrome://resources/cr_elements/chromeos/cros_color_overrides.css.js
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #include=cros-color-overrides
 * #css_wrapper_metadata_end */

[hidden] {
  /* The |hidden| attribute does not hide an element with an explicitly
   * specified |display| property. Handle this by forcing display to |none|
   * when the |hidden| attribute is present. */
  display: none !important;
}

:host {
  --personalization-app-grid-item-background-color: var(--google-grey-100);
  --personalization-app-grid-item-border-radius: 12px;
  --personalization-app-grid-item-height: 120px;
  --personalization-app-grid-item-spacing: 16px;

  --personalization-app-text-shadow-elevation-1: 0 1px 3px
      rgba(0, 0, 0, 15%), 0 1px 2px rgba(0, 0, 0, 30%);

  /* copied from |AshColorProvider| |kSecondToneOpacity| constant. */
  --personalization-app-second-tone-opacity: 0.3;

  --personalization-app-label-font: 500 13px/20px
      var(--cros-font-family-google-sans);
}

:host-context(body.jelly-enabled) {
  --personalization-app-grid-item-background-color:
      var(--cros-sys-secondary_container);
}

@media (prefers-color-scheme: dark) {
  :host {
    --personalization-app-grid-item-background-color: rgba(var(--google-grey-700-rgb), 0.3);
  }

  :host-context(body.jelly-enabled) {
    /* When Jelly is enabled, the
     * |personalization-app-grid-item-background-color| is the same for light
     * and dark mode. */
    --personalization-app-grid-item-background-color:
        var(--cros-sys-secondary_container);
  }
}

iron-list {
  height: 100%;
}

@keyframes ripple {
  /* 0 ms */
  from {
    opacity: 1;
  }
  /* 200 ms */
  9% {
    opacity: 0.15;
  }
  /* 350 ms */
  15.8% {
    opacity: 0.15;
  }
  /* 550 ms, hold for 83ms * 20 and then restart */
  24.9% {
    opacity: 1;
  }
  /* 2210 ms */
  to {
    opacity: 1;
  }
}

.placeholder {
  animation: 2210ms linear var(--animation-delay, 1s) infinite ripple;
}

.preview-container {
  border: 1px solid var(--cros-separator-color);
  border-radius: 16px;
}

:host-context(body.jelly-enabled) .preview-container {
  border: none;
}

.preview-text-container,
.preview-text-placeholder {
  align-items: flex-start;
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
}

.preview-text-container {
  justify-content: flex-end;
}

.preview-text-placeholder {
  justify-content: center;
}

.placeholder {
  background-color: var(--personalization-app-grid-item-background-color);
  border-radius: 12px;
}

.preview-image-container {
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/**
 * Hover a border over the image container to avoid sub pixel rounding issues
 * with chrome scaling images.
 */
.preview-image-border,
.photo-images-border,
.wallpaper-grid-item-border {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  bottom: 0;
  box-sizing: border-box;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.preview-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.preview-text-container > *,
.preview-text-placeholder > * {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-text-container > * + * {
  margin-top: 4px;
}

.preview-text-placeholder > * + * {
  margin-top: 8px;
}

.preview-text-container > span:first-child {
  color: var(--cros-text-color-secondary);
  font: var(--cros-body-2-font);
}

.preview-text-placeholder > .placeholder:first-child {
  /* Each row is 83 ms after the prior element. */
  --animation-delay: calc(1s + 83ms);
  height: 20px;
  width: 20%;
}

.preview-text-container > span:nth-child(2) {
  color: var(--cros-text-color-primary);
  font: var(--cros-display-6-font);
}

.preview-text-placeholder > .placeholder:nth-child(2) {
  --animation-delay: calc(1s + 83ms * 2);
  height: 24px;
  width: 75%;
}

.preview-text-container > span:nth-child(n+3) {
  color: var(--cros-text-color-secondary);
  font: var(--cros-body-1-font);
}

.preview-text-placeholder > .placeholder:nth-child(n+3) {
  --animation-delay: calc(1s + 83ms * 3);
  height: 20px;
  width: 33%;
}

.ambient-subpage-element-title {
  color: var(--cros-text-color-primary);
  font: var(--personalization-app-label-font);
  margin: 34px 8px 16px 8px;
}

.ambient-toggle-row-container {
  border: 1px solid var(--cros-separator-color);
  border-radius: 8px;
  display: flex;
  flex-flow: column nowrap;
  height: 48px;
  width: 100%;
}

.ambient-toggle-row {
  align-items: center;
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 0 20px;
}

.ambient-toggle-row + .ambient-toggle-row {
  border-top: 1px solid var(--cros-separator-color);
}

.ambient-toggle-row > p {
  font: var(--cros-body-1-font);
  height: 20px;
  margin: 0;
}

.clickable {
  cursor: pointer;
}

.leftspacertop {
  grid-area: leftspacertop;
}

.leftspacerbottom {
  grid-area: leftspacerbottom;
}

.rightspacertop {
  grid-area: rightspacertop;
}

.rightspacerbottom {
  grid-area: rightspacerbottom;
}

:host-context(body.jelly-enabled) div[class$='spacertop'] {
  background-color: var(--cros-sys-app_base_shaded);
}

:host-context(body.jelly-enabled) div[class$='spacerbottom'] {
  background-color: var(--cros-bg-color);
}

:host-context(body.jelly-enabled) .leftspacerbottom {
  border-radius: 12px 0 0 12px;
}

:host-context(body.jelly-enabled) .rightspacerbottom {
  border-radius: 0 12px 12px 0;
}

:host-context(body.jelly-enabled) .preview-container {
  background-color: var(--cros-bg-color);
}

:host-context(body.jelly-enabled) .ambient-toggle-row-container {
  border: none;
}

:host-context(body.jelly-enabled) .ambient-toggle-row {
  margin: 0;
}

:host-context(body.jelly-enabled) .ambient-toggle-row > p {
  color: var(--cros-text-color-secondary);
  font: var(--cros-body-2-font);
}

:host-context(body.jelly-enabled) .ambient-subpage-element-title {
  margin-top: 20px;
}

:host-context([dir=rtl]) iron-icon[icon='cr:chevron-right'] {
  transform: scaleX(-1);
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
